<template>
  <div class="address">
    <div class="slot">
      <div class="top">
        <div class="return" @click="goback">
          <img src="@/assets/my/zuo.png" alt />
        </div>
        <span>编辑地址</span>
      </div>
    </div>
    <div class="main">
      <form class="form">
        <div class="list">
          <span class="span">姓名</span>
          <input
            class="input"
            placeholder="请输入真实姓名"
            type="text"
            v-model="forminfo.username"
            name="Username"
          />
        </div>
        <div class="cdborder"></div>
        <div class="list cd_margin1">
          <span class="span">联系电话</span>
          <input
            class="input"
            placeholder="请输入电话号码"
            type="number"
            v-model="forminfo.usernumber"
            name="Usernumber"
          />
        </div>

        <div class="list cd_margin">
          <span class="span">所在地区</span>
          <div class="ress">
            <input type="text" name id :value="valueArea" placeholder="请选择所在地区" @click="bindShow" />
            <div class="jiantou">
              <img src="@/assets/pblic/right.png" alt />
            </div>
          </div>
        </div>
        <div class="cdborder"></div>
        <div class="list" style="padding-bottom: 32px;">
          <span class="span" style="margin-top: -50px;">详细地址</span>
          <textarea
            class="input cd_input"
            v-model="forminfo.str"
            placeholder="街道、楼牌号等"
            type="text"
            name="Usermoresite"
          />
        </div>
        <div class="moren">
          <div class="img" @click="ismoren">
            <img v-if="forminfo.is_default==1" src="@/assets/pblic/hgou.png" alt />
            <img v-if="forminfo.is_default==0" src="@/assets/home/noxuan.png" alt />
          </div>
          <div class="p">设为默认地址</div>
        </div>
        <div class="tijiao_btn">
          <div class="btn1" @click="submit">保存</div>
          <div class="btn2" @click="shanchu">删除</div>
        </div>
      </form>
    </div>
    <div class="zhezhao" v-if="isshow"></div>
    <div class="zhezhao1" v-if="isshow">
      <div class="tankuang">
        <div class="guanb" @click="quxiao">
          <img src="@/assets/pblic/guanbi.png" alt />
        </div>
        <div class="p">确定删除该地址？</div>
        <div class="btn">
          <div class="btn1" @click="quxiao">取消</div>
          <div class="btn2" @click="queren">确定</div>
        </div>
      </div>
    </div>
    <van-popup
      v-model="showArea"
      position="bottom"
      :style="{ height: '10rem', borderRadius: '20px 20px 0px 0px' }"
    >
      <div class="dizhi">
        <div class="dizhi_top">
          <div class="chack">请选择</div>
          <div class="guanbi" @click="bindCancel">
            <img src="@/assets/pblic/guanbi.png" alt />
          </div>
        </div>
        <div class="dizhiinfo">
          <div :class="type==1?'li1':'li'" >{{forminfo.province}}</div>
          <div :class="type==2?'li1':'li'" >{{forminfo.city}}</div>
          <div :class="type==3?'li1':'li'" class="li" >{{forminfo.area}}</div>
        </div>
        <div class="dizhimain">
          <div
            class="list"
            v-for="item in dizhilist"
            :key="item.id"
            @click="changeid(item.id,item.district_name,item.type)"
          >
            <div class="img" v-if="id==item.id">
              <img src="@/assets/pblic/hgou.png" alt />
            </div>
            <div>{{item.district_name}}</div>
          </div>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      address_id: 0,
      isshow: false,
      id: 1,
      type: 1,
      dizhilist: [],
      showArea: false,
      valueArea: "", //地区值
      arrArea: [],
      forminfo: {
        username: "",
        usernumber: "",
        province: "请选择", //省
        city: "请选择", // 市
        area: "请选择", // 区
        str: "", //详细地址
        district_sqe: [0, 0, 0],
        is_default: 0,
      },
      type: 0,
      orderid: 0,
      token:""
    };
  },
  mounted() {
    this.token = window.localStorage.getItem("token")
    this.address_id = this.$route.query.id;
    this.type = this.$route.query.type;
    this.orderid = this.$route.query.order_id;
     if(!window.localStorage.getItem("token")){
      this.$router.push("/home");
    }else{
      this.gethttp();
    }
    axios
      .post("/index/user/ads_info", this.$qs.stringify({
        token: this.token,
        id: this.address_id,
      }))
      .then((res) => {
        console.log(res.data, 111);
        if (res.data.code == 1) {
          this.forminfo.username = res.data.data.name;
          this.forminfo.usernumber = res.data.data.phone;
          this.forminfo.province = res.data.data.province;
          this.forminfo.city = res.data.data.city;
          this.forminfo.area = res.data.data.area;
          this.forminfo.str = res.data.data.detail;
          this.forminfo.is_default = res.data.data.is_default;
          this.valueArea =
            this.forminfo.province +
            "、" +
            this.forminfo.city +
            "、" +
            this.forminfo.area;
          this.showArea = false;
        } else {
          this.$toast(res.data.msg);
        }
      });
  },
  beforeCreate() {
    document
      .querySelector("body")
      .setAttribute("style", "background-color:#F8F8F8");
  },
  beforeDestroy() {
    document.querySelector("body").setAttribute("style", "");
  },
  methods: {
    goback() {
      this.$router.back()
      // this.$router.push({
      //         path: "/myaddress",
      //          query: {type: this.type, order_id: this.orderid },
      // });
    },
    bindShow() {
      this.id = 1;
      this.showArea = true;
      this.xuanqusheng()
    },
    bindCancel() {
      this.showArea = false;
    },
    xuanqusheng() {
      this.id = 1;
      this.type = 1;
      this.forminfo.district_sqe = [];
      this.gethttp();
    },
    xuanqushi() {
      this.type = 2;
      this.gethttp();
    },
    xuanququ() {
      this.type = 3;
      this.gethttp();
    },
    ismoren() {
      if (this.forminfo.is_default == 1) {
        this.forminfo.is_default = 0;
      } else {
        this.forminfo.is_default = 1;
      }
    },
    gethttp() {
      axios
        .post("/index/user/address_linkage", this.$qs.stringify({
          token: this.token,
          id: this.id,
        }))
        .then((res) => {
          if (res.data.code == 1) {
            this.dizhilist = res.data.data;
          } else {
            this.$toast(res.data.msg);
          }
        });
    },
    changeid(id, name, type) {
      this.id = id;
      if (type == 1) {
        this.forminfo.province = name;
        this.forminfo.district_sqe[0] = id;
        this.xuanqushi()
      } else if (type == 2) {
        this.forminfo.city = name;
        this.forminfo.district_sqe[1] = id;
        this.xuanququ()
      } else {
        this.forminfo.area = name;
        this.forminfo.district_sqe[2] = id;
        this.valueArea =
          this.forminfo.province +
          "、" +
          this.forminfo.city +
          "、" +
          this.forminfo.area;
        this.showArea = false;
      }
    },
    submit() {
      if(this.forminfo.province==="请选择" || this.forminfo.city==="请选择" || this.forminfo.area==="请选择"){
        this.$toast("请选择所在地区");
        return
      }
      if(this.forminfo.usernumber===''){
        this.$toast("请输入电话号码");
        return
      }
      axios
        .post("/index/user/address", this.$qs.stringify({
          token: this.token,
          name: this.forminfo.username,
          phone: this.forminfo.usernumber,
          province: this.forminfo.province,
          city: this.forminfo.city,
          area: this.forminfo.area,
          detail: this.forminfo.str,
          district_sqe: this.forminfo.district_sqe.toString(),
          is_default: this.forminfo.is_default,
          id: this.address_id,
        }))
        .then((res) => {
          console.log(res.data, 1111);
          if (res.data.code === 1) {
            this.$toast(res.data.msg);
            this.$router.back()
            //   {
            //   path: "/myaddress",
            //   query: { order_id: this.orderid, type: this.type },
            // }
            // );
          } else {
            this.$toast(res.data.msg);
          }
        });
    },
    shanchu() {
      this.isshow = true;
    },
    quxiao() {
      this.isshow = false;
    },
    queren() {
      this.isshow = true;
      axios
        .post("/index/user/adsDel", this.$qs.stringify({
          token: this.token,
          id: this.address_id,
        }))
        .then((res) => {
          console.log(res.data, 1111);
          if (res.data.code == 1) {
            this.$toast(res.data.msg);
            this.$router.push({
              path: "/myaddress",
              query: { order_id: this.orderid, type: this.type },
            });
          } else {
            this.$toast(res.data.msg);
          }
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.slot {
  width: 100%;
  height: 44px;
  .top {
    width: 100%;
    height: 44px;
    display: flex;display: -webkit-flex;
    justify-content: center;
    align-items: center;
    background: white;
    position: fixed;
    top: 0;
    left: 0;
    .return {
      width: 38px;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      display: flex;display: -webkit-flex;
      justify-content: center;
      align-items: center;
      img {
        width: 8px;
        height: 15px;
      }
    }
    span {
      font-size: 18px;
      font-family: PingFang SC;
      font-weight: bold;
      color: #000000;
      line-height: 44px;
    }
  }
}
.main {
  margin-top: 8px;
  width: 100%;
  height: 100%;
  .form {
    width: 100%;
    .cd_margin1 {
      margin-top: 1px;
    }
    .cd_margin {
      margin-top: 8px;
    }
    .cdborder {
      width: 100%;
      height: 1px;
    }
    .list {
      display: flex;display: -webkit-flex;
      align-items: center;
      background: white;
      .span {
        width: 80px;
        margin-left: 15px;
        font-size: 15px;
        font-family: PingFang SC;
        font-weight: 500;
        color: #565656;
        line-height: 50px;
      }
      input {
        width: 250px;
        font-size: 16px;
        font-family: PingFang SC;
        font-weight: 500;
        color: #000000;
        border: none;
        line-height: 50px;
      }
      .cd_input {
        width: 250px;
        border: none;
        font-size: 16px;
        font-family: PingFang SC;
        font-weight: 500;
        color: #000000;
        line-height: 28px;
      }
      .ress {
        width: 250px;
        height: 100%;
        font-size: 16px;
        font-family: PingFang SC;
        font-weight: 500;
        color: #000000;
        line-height: 28px;
        display: flex;display: -webkit-flex;
        justify-content: space-between;
        align-items: center;
        .span1 {
          margin-left: 0;
        }
        .jiantou {
          img {
            width: 7px;
            height: 12px;
          }
        }
      }
    }
    .moren {
      margin-top: 8px;
      height: 50px;
      display: flex;display: -webkit-flex;
      align-items: center;
      background: white;
      .img {
        width: 17px;
        height: 17px;
        margin-left: 25px;
        display: flex;display: -webkit-flex;
        justify-content: center;
        align-items: center;
        img {
          width: 100%;
        }
      }
      .p {
        margin-left: 10px;
        font-size: 15px;
        font-family: PingFang SC;
        font-weight: bold;
        color: #222222;
      }
    }
    .tijiao_btn {
      display: flex;display: -webkit-flex;
      flex-direction: column;
      margin-top: 120px;
      align-items: center;
      justify-content: center;
      .btn1 {
        width: 300px;
        height: 44px;
        background: #fdd40a;
        border-radius: 22px;
        font-size: 17px;
        font-family: PingFang SC;
        font-weight: 500;
        color: #222222;
        line-height: 44px;
        text-align: center;
        border: none;
      }
      .btn2 {
        width: 300px;
        height: 44px;
        border: 1px solid #fdd40a;
        border-radius: 22px;
        font-size: 17px;
        font-family: PingFang SC;
        font-weight: 500;
        color: #222222;
        line-height: 44px;
        text-align: center;
        margin-top: 40px;
        background: white;
      }
    }
  }
}
.zhezhao {
  width: 100%;
  height: 100%;
  background: #000000;
  opacity: 0.5;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 19;
}
.zhezhao1 {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 19;
  display: flex;display: -webkit-flex;
  justify-content: center;
  align-items: center;
  .tankuang {
    width: 310px;
    height: 145px;
    background: #ffffff;
    border-radius: 10px;
    position: relative;
    .guanb {
      position: absolute;
      top: 5px;
      right: 5px;
      img {
        width: 18px;
        height: 18px;
      }
    }
    .p {
      width: 100%;
      font-size: 16px;
      font-family: PingFang SC;
      font-weight: 500;
      color: #000000;
      line-height: 16px;
      text-align: center;
      margin-top: 43px;
    }
    .btn {
      width: 100%;
      display: flex;display: -webkit-flex;
      align-items: center;
      justify-content: center;
      margin-top: 30px;
      .btn1 {
        width: 123px;
        height: 37px;
        background: #dddddd;
        border-radius: 18.5px;
        font-size: 14px;
        font-family: PingFang SC;
        font-weight: 500;
        color: #555555;
        line-height: 37px;
        text-align: center;
      }
      .btn2 {
        width: 123px;
        height: 37px;
        background: #fdd40a;
        border-radius: 18.5px;
        font-size: 14px;
        font-family: PingFang SC;
        font-weight: 500;
        color: #000000;
        line-height: 37px;
        text-align: center;
        margin-left: 24px;
      }
    }
  }
}
.dizhi {
  width: 100%;
  height: 475px;
  background: #ffffff;
  border-radius: 10px 10px 0px 0px;
  .dizhi_top {
    width: 100%;
    display: flex;display: -webkit-flex;
    justify-content: space-between;
    .chack {
      font-size: 17px;
      font-family: PingFang SC;
      font-weight: bold;
      color: #000000;
      line-height: 17px;
      margin-left: 20px;
      margin-top: 18px;
    }
    .guanbi {
      width: 19px;
      height: 19px;
      padding: 5px;
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
  .dizhiinfo {
    display: flex;display: -webkit-flex;
    margin-top: 32px;
    font-size: 15px;
    font-family: PingFang SC;
    font-weight: bold;
    color: #000000;
    line-height: 26px;
    .li {
      margin-left: 25px;
    }
    .li1 {
      margin-left: 25px;
      border-bottom: 2px solid #fdd40a;
    }
  }
  .dizhimain {
    width: 100%;
    height: 375px;
    overflow-x: hidden;
    overflow-y: auto;
    .list {
      width: 100%;
      height: 40px;
      margin-left: 20px;
      font-size: 14px;
      font-family: PingFang SC;
      font-weight: 500;
      line-height: 40px;
      color: #000000;
      display: flex;display: -webkit-flex;
      align-items: center;
      .img {
        width: 15px;
        height: 15px;
        margin-right: 10px;
        display: flex;display: -webkit-flex;
        justify-content: center;
        align-items: center;
        img {
          width: 15px;
          height: 15px;
        }
      }
    }
  }
}
</style>
